<!doctype html>

<title>RBush Tree Visualization</title>
<canvas id="canvas" width="701" height="701"></canvas>
<br>
<button id="insert1">Insert 50000</button>
<button id="insert2">Insert 1000</button>
<button id="insert3">Bulk-insert 50000</button>
<button id="insert4">Bulk-insert 1000</button>
<button id="remove">Remove leftmost 10000</button>

<script src="../rbush.js"></script>
<script src="viz.js"></script>
<script>

var N = 100000;

function genData(N) {
    var data = [];
    for (var i = 0; i < N; i++) {
        data[i] = randBox(1);
    }
    return data;
}

var tree = rbush(10);
var data = [];

genBulkInsert(N)();

function genInsertOneByOne(K) {
    return function () {
        var data2 = genData(K);

        console.time('insert ' + K + ' items');
        for (var i = 0; i < K; i++) {
            tree.insert(data2[i]);
        }
        console.timeEnd('insert ' + K + ' items');

        data = data.concat(data2);

        draw();
    };
}

function genBulkInsert(K) {
    return function () {
        var data2 = genData(K);

        console.time('bulk-insert ' + K + ' items');
        tree.load(data2);
        console.timeEnd('bulk-insert ' + K + ' items');

        data = data.concat(data2);

        draw();
    };
}

document.getElementById('insert1').onclick = genInsertOneByOne(50000);
document.getElementById('insert2').onclick = genInsertOneByOne(1000);
document.getElementById('insert3').onclick = genBulkInsert(50000);
document.getElementById('insert4').onclick = genBulkInsert(1000);
document.getElementById('canvas').onclick = search;
document.getElementById('remove').onclick = remove;

</script>
